<template>
  <div class="ratings">
    <div class="overview">
      <!--左半部分-->
      <div class="left">
        <div class="score">{{seller.score}}</div>
        <div class="text">综合评分</div>
        <div class="rank-rate">高于周边商家{{seller.rankRate}}%</div>
      </div>
      <!--右半部分-->
      <div class="right">
        <div class="star-wrapper service">
          <span class="text">服务态度</span>
          <v-star-rating :size="36" :score="seller.serviceScore"></v-star-rating>
          <span class="score-number">{{seller.serviceScore}}</span>
        </div>
        <div class="star-wrapper food">
          <span class="text">商品质量</span>
          <v-star-rating :size="36" :score="seller.foodScore"></v-star-rating>
          <span class="score-number">{{seller.foodScore}}</span>
        </div>
        <div>
          <span class="text">送达时间</span>
          <span class="time">{{seller.deliveryTime}}分钟</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import StarRating from '../StarRating/StarRating';

  export default {
    components: {
      'v-star-rating': StarRating
    },
    data () {
      return {
      }
    },
    props: {
      seller: {
        type: Object,
        default() {
          return {}
        }
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .ratings {
    position: absolute;
    top: 174px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    .overview {
      display: flex;
      padding: 18px 0;
      border-bottom: 1px solid rgba(7, 17, 27, .1);
      .left {
        flex: 0 0 137px;
        padding: 6px 0;
        width: 137px;
        border-right: 1px solid rgba(7, 17, 27, .1);
        text-align: center;
        @media only screen and (max-width: 320px) {
          flex: 0 0 120px;
          width: 120px;
        }
        .score {
          padding-bottom: 6px;
          font-size: 24px;
          color: rgb(255, 153, 0);
          line-height: 28px;
        }
        .text {
          padding-bottom: 8px;
          font-size: 12px;
          color: rgb(7, 17, 27);
          line-height: 12px;
        }
        .rank-rate {
          font-size: 10px;
          color: rgb(147, 153, 159);
          line-height: 10px;
        }
      }
      .right {
        flex: 1;
        padding: 6px 0 6px 24px;
        font-size: 0;
        @media only screen and (max-width: 320px) {
          padding: 6px 0 6px 6px;
        }
        .star-wrapper {
          display: flex;
          padding-bottom: 8px;
        }
        .text {
          padding-right: 12px;
          font-size: 12px;
          color: rgb(7, 17, 27);
          line-height: 18px;
        }
        .time {
          font-size: 12px;
          color: rgb(147, 153, 159);
          line-height: 18px;
        }
        .score-number {
          padding-left: 12px;
          font-size: 12px;
          color: rgb(255, 153, 0);
          line-height: 18px;
        }
      }
    }
  }
</style>
